<template>
	<view>
		<view class="_basic-info">
			<view class="info-top">
				<text>基本信息</text>
				<text>占位</text>
			</view>
			<view class="info-details">
				<view class="identity">
					<image :src="msg.avatarDetail.identityIconUrl" v-if="msg.avatarDetail">
					</image>
					<text v-if="msg.mainAuthType">{{msg.mainAuthType.desc}} ></text>
					<!-- <u-icon name="arrow-right"></u-icon> -->
				</view>
				<text>村龄：{{msg.createTime | year}}年({{msg.createTime | times}}注册)</text>
				<text>性别：{{gender}}</text>
				<text>个人简介：{{msg.signature}}</text>
			</view>
		</view>
		<!-- 用户创建歌单 -->
		<view class="list_warp">
			<view class="list_warp-top">
				<text class="list_title">创建的歌单</text>
				<text class="list_length">({{userFound.length}}个)</text>
			</view>
			<view class="list_content" v-for="(item,index) in userFound" :key="item.id" @tap="send(item.id)">
				<view class="list_content-left">
					<image :src="item.coverImgUrl" mode=""></image>
				</view>
				<view class="list_content-right">
					<text class="list_content-right-txt1">{{item.name}}</text>
					<text class="list_content-right-txt2">{{item.trackCount}}首，播放{{item.playCount | count}}</text>
				</view>

			</view>
		</view>

		<!-- 收藏歌单 -->
		<view class="list_warp">
			<view class="list_warp-top">
				<text class="list_title">收藏的歌单</text>
				<text class="list_length">({{collectSongs.length}}个)</text>
			</view>
			<view class="list_content" v-for="(item,index) in collectSongs" :key="item.id" @tap="send(item.id)">
				<view class="list_content-left">
					<image :src="item.coverImgUrl" mode=""></image>
				</view>
				<view class="list_content-right">
					<text class="list_content-right-txt1">{{item.name}}</text>
					<text
						class="list_content-right-txt2">{{item.trackCount}}首，by{{item.creator.nickname}},播放{{item.playCount | count}}</text>
				</view>

			</view>
			<u-line></u-line>
			<text class="view_all">查看全部 ></text>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {};
		},
		props: ['msg', 'userFound', 'collectSongs'],
		methods: {
			send(id){
				uni.navigateTo({
					url:"/view/SongSheet/SongSheet?id=" + id
				})
			}
		},
		computed: {
			gender() {
				let obj = "";
				if (this.msg.gender == 0) {
					obj = "女"
				} else {
					obj = "男"
				}
				return obj
			}
		},
		filters: {
			times(value) {
				return moment(value).format('YYYY年MM月');
			},
			year(value) {
				const num = moment().format('YYYY') - moment(value).format('YYYY')
				return num
			},
			count(v) {
				return v > 100000 || v > 100000000 ? (v / 10000).toFixed(1) + '万次' : v + '次'
			}

		},
	}
</script>

<style lang="scss" scoped>
	._basic-info {
		margin: 30rpx 30rpx;
		// height: 400rpx;
		border-radius: 15rpx;
		background-color: #fff;
		font-size: 35rpx;
		font-family: STXihei;

		.info-top {
			font-weight: bold;
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			// margin-top: ;
		}

		.identity {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
				margin-bottom: 15rpx;
			}
		}

		.info-details {
			display: flex;
			flex-direction: column;
			margin: 0 30rpx;
			color: #999;
			line-height: 65rpx;
			padding-bottom: 15rpx;

			// text{
			// 	margin-top: 15rpx;
			// }
		}
	}

	.list_warp {
		margin: 30rpx 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
		font-family: STXihei;

		&-top {
			display: flex;
			align-items: center;
			padding: 30rpx;

			.list_title {
				font-weight: bold;
				font-size: 35rpx;
			}

			.list_length {
				font-size: 25rpx;
				color: #999;
				margin-left: 15rpx;
			}
		}

		.list_content {
			display: flex;
			align-items: center;
			padding: 0 30rpx;

			&-left {
				display: flex;
				margin-top: 30rpx;

				image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 15rpx;
					box-shadow: 0px -5px 0px 0px rgba(0, 0, 0, .1);
				}
			}

			&-right {
				flex: 1;
				padding-left: 15rpx;
				padding-top: 15rpx;
				display: flex;
				justify-content: center;
				flex-direction: column;
				overflow: hidden;


				&-txt1 {
					font-size: 35rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				&-txt2 {
					font-size: 25rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: #999;
				}
			}
		}

		.view_all {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 15rpx 0rpx;
			font-size: 30rpx;
			color: #999;
		}
	}
</style>
